<template>
	<basic-container>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="套餐管理" name="first">
				<avue-crud :option="packageOption" :data="packageData" ref="crud" v-model="packageForm" :table-loading="loading"
				 :permission="permissionList" :page="packagePage" @refresh-change="refreshPackageChange" @search-change="searchPackageChange"
				 @search-reset="searchPackageReset" @current-change="currentPackageChange" @size-change="sizePackageChange"
				 @on-load="onPackageLoad">
					<template slot-scope="{row}" slot="goodsMainPhotoUrl">
						<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
					</template>
					<template slot-scope="" slot="menuLeft">
						<el-button @click="addNew()" icon="el-icon-plus" size="mini" type="primary">新增活动</el-button>
					</template>
					<template slot-scope="scope" slot="menu">
						<el-button @click="editAct(scope.row)" size="mini" type="text">编辑</el-button>
						<el-button @click="enterActivity(scope.row)" size="mini" type="text">删除</el-button>
						<el-button @click="activityLink(scope.row)" size="mini" type="text">复制链接</el-button>
					</template>
				</avue-crud>
			</el-tab-pane>
			<el-tab-pane label="套餐商品管理" name="second">
				<avue-crud :option="option" :data="data" ref="crud" v-model="form" :table-loading="loading" :permission="permissionList"
				 :page="page" @refresh-change="refreshChange" @search-change="searchChange" @search-reset="searchReset"
				 @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
					<template slot-scope="{row}" slot="goodsMainPhotoUrl">
						<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
					</template>
					<template slot-scope="scope" slot="menu">
						<el-button @click="editAct(scope.row)" size="mini" type="text">编辑</el-button>
						<el-button @click="applyList(scope.row.id)" size="mini" type="text">删除</el-button>
					</template>
				</avue-crud>
			</el-tab-pane>
		</el-tabs>

		<!-- 新增和编辑-->
		<el-drawer :wrapperClosable="false" :visible.sync="drawerNew" :with-header="false" size="60%">
			<div class="demo-drawer__header">
				<div class="drawerHeader">
					<strong>{{ deawerNewTitle }}</strong>
				</div>
			</div>
			<div class="demo-drawer__content">
				<el-steps :space="200" :active="activeStep" finish-status="success" style="padding-left: 200px;padding-bottom: 50px;">
					<el-step title="选择商品"></el-step>
					<el-step title="设置套餐"></el-step>
					<el-step title="设置商品"></el-step>
					<el-step title="完成并投放"></el-step>
				</el-steps>
				<!-- 第一步-选择商品 -->
				<div class="changeGood" v-if="activeStep==0">
					<el-row>
						<el-col :span="4">
							<div>主商品</div>
							<div class="grid-content bg-purple" @click="chiceGoods(0)" v-if="mainGood.id!= undefined">
								<el-image style="width: 100px; height: 100px" :src="mainGood.goodsMainPhotoUrl" fit="contain"></el-image>
								<div class="goodName">{{mainGood.goodsName}}</div>
								<div class="price">￥{{mainGood.showPrice}}</div>
							</div>
							<div class="grid-content bg-purple" @click="chiceGoods(0)" v-else>
								<i class="el-icon-plus"></i>
								<p>添加主商品 </p>
							</div>
						</el-col>
						<el-col :span="20">
							<div>
								<div>搭配商品（{{packageGood.length}}/8）</div>
								<div class="goods">
									<div class="grid-content bg-purple1" @click="chiceGoods(1)">
										<i class="el-icon-plus"></i>
										<p>添加搭配商品</p>
									</div>
									<div class="grid-content bg-purple1" v-for="item of packageGood" :key="item.id">
										<el-image style="width: 100px; height: 100px" :src="item.goodsMainPhotoUrl" fit="contain"></el-image>
										<div class="goodName">{{item.goodsName}}</div>
										<div class="price">￥{{item.showPrice}}</div>
									</div>
								</div>
							</div>

						</el-col>
					</el-row>
					<div class="foot">
						<el-button class="next" @click="nextOne">下一步，设置套餐信息</el-button>
						<el-button class="cancel" @click="closeDrawer">取消</el-button>
					</div>
				</div>
				<!-- 第二步 设置套餐 -->
				<avue-form ref="form" v-model="obj" :option="newOption" @submit="nextTwo" v-if="activeStep==1">
					<!-- <template slot-scope="scope" slot="acApplyEndTime">
						<div class="upload">
							<el-date-picker v-model="obj.acApplyEndTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
							 type="datetime" placeholder="选择报名截止日期时间" align="right" :picker-options="pickerOption">
							</el-date-picker>
						</div>
					</template> -->
					<template slot-scope="scope" slot="acTime">
						<div class="upload">
							<el-date-picker v-model="obj.acTime" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
							 start-placeholder="活动开始日期" end-placeholder="活动结束日期" align="right" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
							</el-date-picker>
						</div>
					</template>
					<!-- <template slot-scope="scope" slot="preheatTime">
						<div class="upload">
							<div class="upload">
								<el-date-picker v-model="obj.preheatTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
								 placeholder="选择活动预热时间" align="right" :picker-options="pickerOption"></el-date-picker>
							</div>
						</div>
					</template> -->
					<template slot-scope="scope" slot="menuForm">
						<el-button @click="closeDrawer">取消</el-button>
					</template>
				</avue-form>
				<!-- 第三步设置商品 -->
				<avue-crud ref="goodListCrud" :data="setGoodsList" :option="setGoodsOption" v-model="setGoods" :table-loading="setGoodsloading"
				 :permission="permissionList" v-if="activeStep==2">
					<template slot-scope="{ row }" slot="goodsMainPhotoUrl">
						<div>
							<el-row>
								<el-col :span="8">
									<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
								</el-col>
								<el-col :span="16">
									<div>
										<div class="goodName">{{row.goodsName}}</div>
										<div class="mbGoodsType" v-if="row.mbGoodsType==1">主商品</div>
										<div class="mbGoodsType" v-else>搭配商品</div>
									</div>
								</el-col>
							</el-row>
							
						</div>
					</template>
					<template slot-scope="{ row }" slot="matchNum">
						<div>
							<el-input  v-model="row.matchNum" placeholder="请输入搭配数量"></el-input>
							<p style="color: #999; font-size: 12px;line-height: 15px;">搭配数量默认固定1，设置规格可改为不大于最大购买数的数字</p>
						</div>
						
					</template>
					<template slot-scope="{ row }" slot="mbGoodsSequence">
						<el-input  v-model="row.mbGoodsSequence" placeholder="范围1-999999999"></el-input>
					</template>
					<template slot-scope="scope" slot="menu">
						<el-button @click="setSpecification" size="mini" type="text">设置规格</el-button>
					</template>
				</avue-crud>
			</div>
		</el-drawer>

		<!-- 选择参与活动商品 -->
		<el-drawer :visible.sync="drawerGoods" :with-header="false" size="60%">
			<div class="demo-drawer__header">
				<div class="drawerHeader"><strong>出售商品列表</strong></div>
			</div>
			<div class="demo-drawer__content">
				<avue-crud ref="goodsCrud" :data="sellerGoodsList" :option="sellerGoodsOption" v-model="sellerGoods" :table-loading="sellerGoodsloading"
				 :permission="permissionList" :page="sellerGoodsPage" @refresh-change="refreshSellerGoodsChange" @search-change="searchSellerGoodsChange"
				 @search-reset="searchSellerGoodsReset" @current-change="currentSellerGoodsChange" @size-change="sizeSellerGoodsChange"
				 @on-load="onSellerGoodsLoad">
					<template slot-scope="{ row }" slot="goodsMainPhotoUrl">
						<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
					</template>
					<template slot-scope="scope" slot="menu">
						<el-button size="mini" type="text" @click="addGoods(scope.row)">添加</el-button>
					</template>
					<template slot="search">
						<el-col :span="12">
							<el-form-item label="商品分类" label-width="100px"  style="display: inline-block;width: 50%;">
								<el-cascader v-model="sellerGoodsClassLabel" :options="chooseProductUserOption" size="mini" @change="sellerGoodUserChange"></el-cascader>
							</el-form-item>
						</el-col>
					</template>
				</avue-crud>
			</div>
		</el-drawer>

		<!-- 参与活动 -->
		<el-drawer :wrapperClosable="false" :visible.sync="drawerActivity" :with-header="false" size="70%">
			<div class="demo-drawer__header">
				<div class="drawerHeader"><strong>参加活动</strong></div>
			</div>
			<div class="demo-drawer__content">
				<avue-form ref="formGoods" v-model="objActivity" :option="optionActivity">
					<template slot-scope="scope" slot="acContent">
						<el-input disabled :value="objActivity.acContent || '无活动说明'"></el-input>
					</template>
					<template slot="goods">
						<avue-crud ref="goodsCrud" :data="goodsList" :option="optionGoods" v-model="objGoods" :table-loading="goodsloading"
						 :permission="permissionList" :page="goodsPage" @selection-change="selectionChange" @refresh-change="refreshGoodsChange"
						 @search-change="searchGoodsChange" @search-reset="searchGoodsReset" @current-change="currentGoodsChange"
						 @size-change="sizeGoodsChange" @on-load="onGoodsLoad">
							<template slot-scope="{ row }" slot="goodsMainPhotoUrl">
								<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
							</template>
						</avue-crud>
					</template>
					<template slot="search">
						<el-col :span="12">
							<el-form-item label="商品分类" label-width="100px"  style="display: inline-block;width: 50%;">
								<el-cascader v-model="goodsClassLabel" :options="chooseProductUserOption" size="mini" @change="handleUserChange"></el-cascader>
							</el-form-item>
						</el-col>
					</template>0
					<template slot="menuForm">
						<el-button type="primary" @click="handleSubmit">保存</el-button>
						<el-button @click="handleEmpty">关闭</el-button>
					</template>
				</avue-form>
			</div>
		</el-drawer>
		<!-- 查看活动商品 -->
		<el-drawer :visible.sync="drawerList" :with-header="false" size="60%" :show-close="true">
			<div class="demo-drawer__header">
				<div class="drawerHeader"><strong>活动商品</strong></div>
			</div>
			<div class="demo-drawer__content" style="padding: 30px;">
				<avue-crud :data="dataList" :option="optionList" v-model="objList" ref="actGoodsList" :table-loading="actGoodsLoading"
				 :permission="permissionList" :page="actGoodsPage" @refresh-change="refreshActGoodsChange" @search-change="searchActGoodsChange"
				 @search-reset="searchActGoodsReset" @current-change="currentActGoodsChange" @size-change="sizeActGoodsChange">
					<template slot-scope="scope" slot="menu">
						<el-button @click="goodsDetail(scope.row.goodsId)" size="mini" type="text">详情</el-button>
					</template>
				</avue-crud>
			</div>
		</el-drawer>
		<!-- 查看活动路径-->
		<el-dialog title="活动路径" :visible.sync="dialogLink" width="30%">
			<div class="diaLink">
				<strong style="color: #000;">PC端活动路径：</strong>
				<p>{{ pcLink }}</p>
				<strong style="color: #000;">移动端活动路径：</strong>
				<p>{{ h5Link }}</p>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogLink = false">关 闭</el-button>
			</span>
		</el-dialog>
		<selFile ref="selFile" selectType="radio" @callback="selFileCallBack" albumCode="store" dialogTitle="选择图片1"
		 selMaxWidth="500px" selMaxHeight="1280px"></selFile>
		<el-drawer title="商品详情" size="70%" :withHeader="false" :visible.sync="dialogTableVisible" width="70%">
			<add-goods v-if="dialogTableVisible" :disadledSpec="disadledSpec" :goodsId="goodsId" :isPublish="isPublish" :isCheck="isCheck"
			 :isRedact="isRedact"></add-goods>
		</el-drawer>
	</basic-container>
</template>

<script>
	import selFile from '@/components/file/selFile';
	import {
		showGoodsStock
	} from '@/api/base/activity/seller/spikeAct';
	import {
		saveOrUpdate,
		getActList,
		joinActivity,
		listActivity,
		getGoodsList,getClassTree
	} from '@/api/base/activity/seller/discountAct';
	import {
		getList
	} from '@/api/base/goods/seller/goods';
	import addGoods from '@/views/base/goods/seller/addGoods';
	import {
		mapGetters
	} from 'vuex';
	import {
		dateFormat
	} from '@/util/date.js';
	var Dict = JSON.parse(localStorage.getItem('mall-dictionary')).content;
	var VAILD = [{
			label: '卖家承担运费',
			value: 0
		},
		{
			label: '买家承担运费',
			value: 1
		}
	];
	var PACKAGETYPE = [{
		label: '自选商品套餐',
		value: 1
	}, {
		label: '固定组合套餐',
		value: 2
	}];
	export default {
		data() {
			return {
				sellerGoodsClassLabel:'', // 选赠品时的列表
				sellerGoodsClassId:'',
				goodsClassLabel:'',
				chooseProductUserOption:[], // 分类的列表
				goodsClassId:'',
				activeName: "first",
				activeStep: 0,
				pickerOptions: {
					shortcuts: [{
							text: '未来一周',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '未来一个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '未来三个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
								picker.$emit('pick', [start, end]);
							}
						}
					]
				},
				pickerOption: {
					disabledDate(time) {
						return time.getTime() + 3600 * 1000 * 24 * 1 < Date.now();
					},
					shortcuts: [{
							text: '今天',
							onClick(picker) {
								picker.$emit('pick', new Date());
							}
						},
						{
							text: '明天',
							onClick(picker) {
								const date = new Date();
								date.setTime(date.getTime() + 3600 * 1000 * 24);
								picker.$emit('pick', date);
							}
						},
						{
							text: '一周后',
							onClick(picker) {
								const date = new Date();
								date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
								picker.$emit('pick', date);
							}
						}
					]
				},
				drawerGoods: false,
				goodType: 0, //0 添加主商品  1 添加搭配商品
				mainGood: {},
				packageGood: [],
				setGoodsList: [],
				setGoods: {},
				setGoodsloading: false,
				setGoodsOption: {
					header: false,
					selection: false,
					menu: true,
					search: false,
					column: [{
							label: '商品名称',
							prop: 'goodsMainPhotoUrl',
							width:'200',
							slot: true
						},
						{
							label: '套餐类型',
							prop: 'matchBeauType',
							type: 'select',
							dicData: PACKAGETYPE,
						},
						{
							label: '搭配数量',
							prop: 'matchNum',
							tip:'搭配数量默认固定1，设置规格可改为不大于最大购买数的数字',
							slot: true
						},
						{
							label: '排序',
							prop: 'mbGoodsSequence',
							slot: true
						},
					]
				},
				sellerGoodsList: [],
				sellerGoods: {},
				sellerGoodsloading: false,
				sellerGoodsQuery: {},
				sellerGoodsPage: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				sellerGoodsOption: {
					header: false,
					selection: false,
					menu: true,
					search: true,
					column: [{
							label: '商品图片',
							prop: 'goodsMainPhotoUrl',
							slot: true
							// readonly: true
						},
						{
							label: '商品名称',
							prop: 'goodsName',
							// readonly: true,
							search: true
						},
						// {
						// 	label: '指定分类',
						// 	prop: 'goodsClassId',
						// 	dicUrl: '/base/goodsClass/listManage',
						// 	dicMethod: 'post',
						// 	dicQuery: {
						// 		classLevel: 0
						// 	},
						// 	props: {
						// 		label: 'className',
						// 		value: 'id'
						// 	},
						// 	// hide: true,
						// 	type: 'select',
						// 	search: true
						// },
						{
							label: '总库存',
							prop: 'goodsSort',
							span: 24
						},
						{
							label: '商品原价（￥）',
							prop: 'originalPrice',
							span: 24
						},
						{
							label: '商城售价（￥）',
							prop: 'showPrice',
							span: 24
						}
					]
				},
				form: {},
				pcLink: '',
				h5Link: '',
				spikeTimes: [],
				sessionId: '',
				objActivity: {}, //参与活动对象
				query: {
					type: 1,
					acType: 8
				},
				dialogTableVisible: false, //商品详情
				isPublish: false,
				isCheck: false,
				isRedact: false,
				disadledSpec: false,
				goodsId: '',
				drawerNew: false,
				dialogLink: false,
				deawerNewTitle: '新增活动',
				drawerList: false,
				drawerActivity: false,
				obj: {
					acFullcuts: [{
						fullPrice: '',
						goodsName: '',
						giveGoodsId: ''
					}]
				},
				dataList: [{
					goodsName: '部分具有合法白飞飞变黑u发黑i合肥',
					storeName: '解耦i人家偶分',
					status: 2
				}],
				//参加活动商品
				goodsList: [],
				imageType: 1,
				data: [{
					vipLevel: '吃大亏',
					acTitle: 'b看i的成分',
					acBeginTime: '2015-02-05',
					acEndTime: '2015-02-05',
					acFreeShipping: '包邮',
					acType: '不知道',
					acStatus: '不知道',
					acStatus1: '不知道',
					integraLimit: '不知道',
					integraLimit1: '不知道'
				}],
				loading: true,
				goodsloading: true,
				rolesTree: [],
				rolesKeys: [],
				acTime: '',
				box: false,
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				goodsPage: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				idList: [],
				goodsQuery: {},
				objList: {},
				optionActivity: {
					emptyBtn: false,
					submitBtn: false,
					column: [{
							label: '活动名称',
							prop: 'acTitle',
							disabled: true,
						    placeholder:'',
							span: 8,
							row: true
						},
						{
							label: '活动说明',
							prop: 'acContent',
							row: true,
							formslot: true,
							span: 8,
							disabled: true
						},
						{
							prop: 'goods',
							span: 24,
							formslot: true
						},
						{
							prop: 'goodsStock',
							span: 24,
							formslot: true
						}
					]
				},
				objGoods: {},
				//店铺商品列表
				optionGoods: {
					searchMenuSpan:8,
					header: false,
					selection: true,
					menu: false,
					search: true,
					column: [{
							label: '商品图片',
							prop: 'goodsMainPhotoUrl',
							slot: true
							// readonly: true
						},
						{
							label: '商品名称',
							prop: 'goodsName',
							// readonly: true,
							search: true
						},
						// {
						// 	label: '指定分类',
						// 	prop: 'goodsClassId',
						// 	dicUrl: '/base/goodsClass/listManage',
						// 	dicMethod: 'post',
						// 	dicQuery: {
						// 		classLevel: 0
						// 	},
						// 	props: {
						// 		label: 'className',
						// 		value: 'id'
						// 	},
						// 	hide: true,
						// 	type: 'select',
						// 	search: true
						// },
						{
							label: '总库存',
							prop: 'stock',
							span: 24
						},
						{
							label: '商城售价',
							prop: 'showPrice',
							span: 24
						}
					]
				},
				//新增
				newOption: {
					// size: 'mini',
					submitText: '下一步，设置商品优惠',
					emptyBtn: false,
					labelWidth: '150',
					column: [{
							label: '套餐名称',
							prop: 'title',
							span: 12,
							maxlength: 10,
							row: true,
							rules: [{
								required: true,
								message: '请输入套餐名称',
								trigger: 'blur'
							}]
						}, {
							label: '套餐介绍',
							prop: 'introduce',
							// tip: '这是信息提示'
							type: 'textarea',
							minRows: 2,
							span: 16,
							maxlength: 50,
							rules: [{
								required: true,
								message: '请输入套餐介绍'
							}]
						},
						{
							label: '套餐类型',
							prop: 'matchBeauType',
							span: 16,
							type: 'radio',
							valueDefault: 1,
							dicData: PACKAGETYPE,
							row: true,
							rules: [{
								required: true,
								message: '请选择邮费类型',
								trigger: 'blur'
							}],
						},
						{
							label: '邮费类型',
							prop: 'shippingType',
							span: 16,
							type: 'radio',
							dicData: VAILD,
							row: true,
							rules: [{
								required: true,
								message: '请选择邮费类型',
								trigger: 'blur'
							}],
							valueDefault: 0
						},
						{
							label: '是否使用优惠券',
							prop: 'isUseCoupon',
							span: 16,
							type: 'radio',
							dicData: Dict.YES_OR_NO_INTEGER,
							row: true,
							rules: [{
								required: true,
								message: '请选择邮费类型',
								trigger: 'blur'
							}],
							valueDefault: 0
						},
						{
							label: "套餐有效时间范围",
							prop: "acTime",
							type: "datetime",
							formslot: true,
							row: true,
							span: 16,
							rules: [{
								required: true,
								message: "请选择活动时间范围",
								trigger: "blur"
							}],
						},
						{
							label: '排序号',
							prop: 'mbGoodsSequence',
							row: true,
							span: 16,
							rules: [{
								required: true,
								message: "请输入排序号",
								trigger: "blur"
							}],
						}


					]
				},
				actGoodsLoading: true,
				actGoodsPage: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				actGoodsQuery: {},
				//参加活动的商品列表
				optionList: {
					size: 'mini',
					excelBtn: false,
					addBtn: false,
					delBtn: false,
					editBtn: false,
					columnBtn: false,
					border: true,
					align: 'center',
					rowKey: 'id',
					height: 'auto',
					// calcHeight: 380,
					column: [{
							label: '商品名称',
							prop: 'goodsName',
							labelWidth: 300,
							fixed: true
						},
						{
							label: '状态',
							prop: 'agStatus',
							type: 'select',
							dicData: Dict.STORE_BRAND_STATUS
						},
						{
							label: '活动名称',
							prop: 'acTitle'
						},
						{
							label: '开始时间',
							prop: 'agBeginTime'
						},
						{
							label: '结束时间',
							prop: 'agEndTime'
						},
					]
				},
				goodsStockList: [],
				objGoodsStock: {},
				goodsStock: {
					size: 'mini',
					excelBtn: false,
					addBtn: false,
					delBtn: false,
					editBtn: false,
					columnBtn: false,
					border: true,
					header: false,
					align: 'center',
					rowKey: 'id',
					menu: false,
					column: [{
							label: '商品名称',
							prop: 'goodsName',
							labelWidth: 300,
							fixed: true
						},
						{
							label: '规格属性',
							prop: 'skuName'
						},
						{
							label: '库存数量',
							prop: 'stocks',
							slot: true
						},
						{
							label: '价格',
							prop: 'groupPrice',
							slot: true
						},
						{
							label: '限购次数',
							prop: 'maxTimes',
							slot: true
						},
						{
							label: '限购数量',
							prop: 'maxCount',
							slot: true
						}
					]
				},
				//套餐商品
				option: {
					size: 'mini',
					excelBtn: false,
					addBtn: false,
					delBtn: false,
					editBtn: false,
					border: true,
					align: 'center',
					search: true,
					rowKey: 'id',
					columnBtn: false,
					column: [{
							label: '宝贝',
							prop: 'goodsMainPhotoUrl',
							fixed: true,
							slot: true
						},
						{
							label: '商品名称/id',
							prop: 'goodsName'
						},
						{
							label: '套餐名称',
							prop: 'title',
							hide: true,
							search: true,
						}, {
							label: '套餐ID',
							prop: 'id',
							hide: true,
							search: true
						},
						{
							label: '套餐类型',
							prop: 'matchBeauType',
							type: 'select',
							dicData: Dict.ACTIVITY_TYPE_ENUM
							// search: true
						},
						{
							label: '套餐状态',
							prop: 'matchStatus',
							dicData: Dict.ACTIVITY_STATE_ENUM,
							type: 'select',
							search: true
						},
						{
							label: '搭配数量',
							prop: 'matchNum'
						},
						{
							label: '单品价（￥）',
							prop: 'acEndTime'
						},
						{
							label: '搭配价（￥）',
							prop: 'acStatus',
						},
						{
							label: '商品类型',
							prop: 'mbGoodsType',
							type: 'select',
							dicData: Dict.ACTIVITY_STAGE_ENUM,
							search: true
						},
					]
				},
				packageData: [],
				packageForm: {},
				packagePage: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				packageQuery: {},
				//套餐
				packageOption: {
					size: 'mini',
					excelBtn: false,
					addBtn: false,
					delBtn: false,
					editBtn: false,
					border: true,
					align: 'center',
					search: true,
					rowKey: 'id',
					columnBtn: false,
					column: [{
							label: '套餐主图',
							prop: 'goodsMainPhotoUrl',
							fixed: true,
							slot: true,
						},
						{
							label: '套餐名称/id',
							fixed: true,
							prop: 'title'
						}, {
							label: '套餐名称',
							prop: 'title',
							hide: true,
							search: true,
						}, {
							label: '套餐ID',
							prop: 'id',
							hide: true,
							search: true
						},
						{
							label: '套餐类型',
							prop: 'matchBeauType',
							fixed: true,
							type: 'select',
							dicData: Dict.ACTIVITY_TYPE_ENUM,
							search: true
						},
						{
							label: '套餐状态',
							prop: 'acStatus',
							fixed: true,
							dicData: Dict.ACTIVITY_STATE_ENUM,
							type: 'select',
							search: true
						},
						{
							label: '启用状态',
							prop: 'matchStatus',
							fixed: true,
							dicData: Dict.ACTIVITY_STATE_ENUM,
							type: 'select',
						},
						{
							label: '优惠时间',
							fixed: true,
							prop: 'mbTime'
						},
					]
				}
			};
		},
		watch: {
			'obj.fullType'(val) {
				var column = this.newOption.column[2];
				if (val == 0) {
					column.display = false;
				} else {
					column.display = true;
				}
			}
		},
		computed: {
			...mapGetters(['permission', 'userInfo']),
			permissionList() {
				return {
					addBtn: this.vaildData(this.permission['/mall-cloud-base/userType/addItem'], false),
					viewBtn: this.vaildData(this.permission['/mall-cloud-base/userType/detail'], false),
					delBtn: this.vaildData(this.permission['/mall-cloud-base/userType/delete'], false),
					editBtn: this.vaildData(this.permission['/mall-cloud-base/userType/editItem'], false)
				};
			}
		},
		components: {
			selFile,
			addGoods
		},
		created() {
			// 获取分类
			getClassTree().then((res) => {
				if (res.status == 200) {
					if (res.data.code == 200) {
						this.chooseProductUserOption = res.data.data;
					} else {
						this.$message.error(res.data.message);
					}
				}
			});
		},
		methods: {
			sellerGoodUserChange(value) {
				let val = [...value]
				let idArr = val.pop()
				this.sellerGoodsClassLabel = value
				this.sellerGoodsClassId = idArr
			},
			handleUserChange(value) {
				let val = [...value]
				let idArr = val.pop()
				this.goodsClassLabel = value
				this.goodsClassId = idArr
			},
			handleClick(tab, event) {
				this.activeName = tab.name
				console.log(tab, event);
			},
			//点击满赠商品输入框，打开选择商品的列表
			changeGoods(index) {
				console.log('第' + index);
				this.currentActivy = index;
				this.drawerGoods = true;
			},
			//删除新增活动组
			removeDomain(item) {
				var index = this.obj.acFullcuts.indexOf(item);
				if (index !== -1) {
					this.obj.acFullcuts.splice(index, 1);
				}
			},
			//新增活动组
			addDomain() {
				this.obj.acFullcuts.push({
					fullPrice: '',
					giveGoodsId: '',
					goodsName: ''
				});
			},
			addGoods(good) {
				console.log(good);
				if (this.goodType == 0) {
					this.mainGood = good
				} else if (this.goodType == 1) {
					this.packageGood.push(good)
				}
				console.log(this.mainGood)
				console.log(this.packageGood)
				this.drawerGoods = false;
			},
			// 查看商品详情
			goodsDetail(id) {
				//查看
				this.goodsId = id;
				this.isCheck = true;
				this.dialogTableVisible = true;
			},

			//添加商品
			chiceGoods(index) {
				this.goodType = index
				if (index == 1 && this.packageGood.length == 8) {
					this.$message.error('搭配商品最多为8个');
				} else {
					this.drawerGoods = true;
				}
			},
			//第一步的下一步按钮
			nextOne() {
				if (this.mainGood.id != undefined && this.packageGood.length > 0) {
					this.activeStep = 1
				} else if (this.mainGood.id == undefined) {
					this.$message.error('请选择主商品');
				} else if (this.packageGood.length == 0) {
					this.$message.error('至少选择一个搭配商品');
				}
			},
			//第二步校验 下一步
			nextTwo(loading, done) {
				console.log(this.obj)
				
				this.obj.mbBeginTime = this.obj.acTime[0]
				this.obj.mbEndTime = this.obj.acTime[1]
				this.setGoodsList.push(this.mainGood)
				this.packageGood.forEach(obj=>{
					this.setGoodsList.push(obj)
				})
				//套餐类型
				this.setGoodsList.forEach(item=>{
					item.matchBeauType=this.obj.matchBeauType
					item.matchNum=1
				})
				console.log(this.setGoodsList)
				this.activeStep=2
			},
			setSpecification(){
				this.$message.error('设置规格');
			},
			//统计活动
			statisticsBut() {
				this.$message('功能待开发');
			},
			activityLink(row) {
				//查看活动链接
				this.pcLink = row.acPcAccUrl;
				this.h5Link = row.acH5AccUrl;
				this.dialogLink = true;
			},
			
			//新增编辑弹框的取消
			closeDrawer() {
				this.drawerNew = false;
				this.$refs.form.resetForm();
			},
			//打开新增弹框
			addNew() {
				this.deawerNewTitle = '新增活动';
				var data = {
					acFullcuts: [{
						fullPrice: '',
						goodsName: '',
						giveGoodsId: ''
					}]
				}
				this.obj = data
				this.drawerNew = true;
			},
			//打开编辑弹框
			editAct(row) {
				this.deawerNewTitle = '编辑活动';
				this.obj = row;
				this.obj.acTime = []
				this.obj.acTime[0] = row.acBeginTime
				this.obj.acTime[1] = row.acEndTime
				this.drawerNew = true;
			},
			//图片返回数据
			selFileCallBack(obj) {
				if (this.imageType == 1) {
					this.obj.acPcAccUrl = obj[0];
				} else if (this.imageType == 2) {
					this.obj.acH5AccUrl = obj[0];
				} else if (this.imageType == 3) {
					this.obj.appPcAccUrl = obj[0];
				}
				console.log(obj);
			},
			//打开选取图片的弹框
			uploadbtn(type) {
				this.imageType = type;
				this.$refs.selFile.open();
			},

			//活动商品列表
			applyList(id) {
				this.actGoodsQuery.acId = id;
				this.onActGoodsLoad(this.actGoodsPage);
				this.drawerList = true;
			},
			//打开参与活动弹框
			enterActivity(row) {
				var goodsParams = {
					storeId: row.storeId
				};
				this.onGoodsLoad(this.goodsPage, goodsParams);
				this.objActivity.actId = row.id;
				this.objActivity.acTitle = row.acTitle;
				this.objActivity.acContent = row.acContent;
				this.drawerActivity = true;
			},
			//参加活动时，选择商品的回调
			selectionChange(list) {
				this.idList = [];
				console.log(list);
				if (list.length > 0) {
					list.forEach((item, index) => {
						this.idList[index] = item.id;
					});
					showGoodsStock(this.idList).then(res => {
						if (res.data.code == 200) {
							this.goodsStockList = res.data.data;
						} else {
							this.$message.error(res.data.message);
						}
					});
				} else {
					this.idList = [];
					this.goodsStockList = [];
				}

				console.log(this.idList);
			},
			//确认参与活动
			handleSubmit() {

				console.log(this.objActivity)

				var data = {
					actId: this.objActivity.actId,
					goodsIds: this.idList,
					// acGoodsSkuList: JSON.stringify(this.goodsStockList)
				};
				joinActivity(data).then(res => {
					if (res.data.code == 200) {
						this.$message({
							type: 'success',
							message: '操作成功！'
						});
						this.drawerActivity = false;
						this.$refs.goodsCrud.toggleSelection();
						this.goodsStockList = [];
					} else {
						this.$message.error(res.data.message);
						this.drawerActivity = false;
						this.$refs.goodsCrud.toggleSelection();
						this.goodsStockList = [];
					}
				});
				console.log(data);
			},
			//关闭参与活动
			handleEmpty() {
				this.drawerActivity = false;
				this.$refs.goodsCrud.toggleSelection();
				this.goodsStockList = [];
			},
			// 新增时 选择赠品 商品表格方法
			searchSellerGoodsReset() {
				this.sellerGoodsClassId = ''
				this.sellerGoodsClassLabel = ''
				this.sellerGoodsQuery = {};
				this.onSellerGoodsLoad(this.sellerGoodsPage);
			},
			searchSellerGoodsChange(params,done) {
				params.goodsClassId = this.sellerGoodsClassId
				this.sellerGoodsQuery = params;
				this.onSellerGoodsLoad(this.sellerGoodsPage, params,done);
			},

			currentSellerGoodsChange(currentPage) {
				this.sellerGoodsPage.currentPage = currentPage;
				this.onSellerGoodsLoad(this.sellerGoodsPage);
			},
			sizeSellerGoodsChange(pageSize) {
				this.sellerGoodsPage.pageSize = pageSize;
				this.onSellerGoodsLoad(this.sellerGoodsPage);
			},
			refreshSellerGoodsChange() {
				this.currentSellerGoodsChange(1);
				this.onSellerGoodsLoad(this.sellerGoodsPage);
			},
			onSellerGoodsLoad(sellerGoodsPage, params = {},done) {
				params.goodsStatus = '0';
				this.sellerGoodsloading = true;
				getGoodsList(sellerGoodsPage.currentPage, sellerGoodsPage.pageSize, Object.assign(params, this.sellerGoodsQuery)).then(
					res => {
						if(done){
							done();
						}
						this.sellerGoodsloading = false;
						const data = res.data;
						this.sellerGoodsPage.total = data.count;
						data.data.forEach(item => {
							item.showPrice = item.goodsPriceBean.showPrice;
							item.originalPrice = item.goodsPriceBean.originalPrice;
						})
						this.sellerGoodsList = data.data;
					});
			},
			// 查看参加活动的商品时的商品表格 清空搜索
			searchActGoodsReset() {
				this.actGoodsQuery = {};
				this.onActGoodsLoad(this.actGoodsPage);
			},
			searchActGoodsChange(params,done) {
				this.actGoodsQuery = params;
				this.onActGoodsLoad(this.actGoodsPage, params,done);
			},

			currentActGoodsChange(currentPage) {
				this.actGoodsPage.currentPage = currentPage;
				this.onActGoodsLoad(this.actGoodsPage);
			},
			sizeActGoodsChange(pageSize) {
				this.actGoodsPage.pageSize = pageSize;
				this.onActGoodsLoad(this.actGoodsPage);
			},
			refreshActGoodsChange() {
				this.currentActGoodsChange(1);
				this.onActGoodsLoad(this.actGoodsPage);
			},
			onActGoodsLoad(actGoodsPage, params = {},done) {
				console.log(actGoodsPage);
				console.log(params);
				listActivity(actGoodsPage.currentPage, actGoodsPage.pageSize, Object.assign(params, this.actGoodsQuery)).then(res => {
					if(done){
						done();
					}
					if (res.data.code == 200) {
						this.actGoodsLoading = false;
						const data = res.data;
						this.actGoodsPage.total = data.count;
						for (let item of data.data) {
							item.agBeginTime = dateFormat(new Date(item.agBeginTime));
							item.agEndTime = dateFormat(new Date(item.agEndTime));
						}
						console.log(data);
						this.dataList = data.data;
					} else {
						this.$message.error(res.data.message);
					}
				});
			},
			searchGoodsReset() {
				this.idList = [];
				this.$refs.goodsCrud.toggleSelection();
				this.goodsQuery = {};
				this.goodsClassId=''
				this.goodsClassLabel = ''
				this.goodsQuery.goodsClassId=''
				this.onGoodsLoad(this.goodsPage);
			},
			searchGoodsChange(params,done) {
				this.idList = [];
				this.$refs.goodsCrud.toggleSelection();
				this.goodsQuery = params;
				params.goodsClassId=this.goodsClassId
				this.onGoodsLoad(this.goodsPage, params,done);
			},

			currentGoodsChange(currentPage) {
				this.goodsPage.currentPage = currentPage;
				this.onGoodsLoad(this.goodsPage);
			},
			sizeGoodsChange(pageSize) {
				this.goodsPage.pageSize = pageSize;
				this.onGoodsLoad(this.goodsPage);
			},
			refreshGoodsChange() {
				this.idList = [];
				this.$refs.goodsCrud.toggleSelection();
				this.onGoodsLoad(this.goodsPage);
			},
			onGoodsLoad(goodsPage, params = {},done) {
				params.goodsStatus = 0;
				getList(goodsPage.currentPage, goodsPage.pageSize, Object.assign(params, this.goodsQuery)).then(res => {
					if(done){
						done();
					}
					this.goodsloading = false;
					const data = res.data;
					this.goodsPage.total = data.count;
					this.goodsList = data.data;
				});
			},
			// 套餐管理
			searchPackageReset() {
				this.acTime = '';
				this.packageQuery = {
					acType: 8,
					type: 1
				};
				this.onLoad(this.packagePage);
			},
			searchPackageChange(params,done) {
				params.acBeginTime = this.acTime[0];
				params.acEndTime = this.acTime[1];
				params.acType = 8;
				params.type = 1;
				console.log(params);
				this.packageQuery = params;
				this.onPackageLoad(this.packagePage, params,done);
			},

			currentPackageChange(currentPage) {
				this.packagePage.currentPage = currentPage;
				this.onPackageLoad(this.packagePage);
			},
			sizePackageChange(pageSize) {
				this.packagePage.pageSize = pageSize;
				this.onPackageLoad(this.packagePage);
			},
			refreshPackageChange() {
				this.onPackageLoad(this.packagePage);
			},
			onPackageLoad(page, params = {},done) {
				this.loading = true;
				this.loading = false;
				getActList(page.currentPage, page.pageSize, Object.assign(params, this.packageQuery)).then(res => {
					if(done){
						done();
					}
					const data = res.data;
					this.packagePage.total = data.count;
					this.packageData = data.data;
				});
			},

			// 套餐商品管理
			searchReset() {
				this.acTime = '';
				this.query = {
					acType: 8,
					type: 1
				};
				this.onLoad(this.page);
			},
			searchChange(params,done) {
				this.page.currentPage=1
				params.acBeginTime = this.acTime[0];
				params.acEndTime = this.acTime[1];
				params.acType = 8;
				params.type = 1;
				console.log(params);
				this.query = params;
				this.onLoad(this.page, params,done);
			},

			currentChange(currentPage) {
				this.page.currentPage = currentPage;
				this.onLoad(this.page);
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.onLoad(this.page);
			},
			refreshChange() {
				this.onLoad(this.page);
			},
			onLoad(page, params = {},done) {
				this.loading = true;
				this.loading = false;
				getActList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					if(done){
						done();
					}
					const data = res.data;
					this.page.total = data.count;
					this.data = data.data;
				});
			},
		}
	};
</script>

<style scoped>
	.drawerHeader {
		font-size: 20px;
		padding: 5px 20px;
	}

	.upload {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.tsmsg {
		width: 200px;
		font-size: 10px;
		color: #999;
		margin: 0px;
		padding-left: 10px;
	}

	.diaLink {
		font-size: 20px;
		padding: 10px;
	}

	.diaLink p {
		padding: 10px;
	}

	.demo-drawer__header {
		padding: 10px;
	}

	.demo-drawer__content {
		padding: 50px;
	}


	.goods {
		display: -webkit-box;
		display: -ms-flexbox;
		overflow: auto;
		height: 200px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}


	.bg-purple {
		padding: 5px;
		width: 100px;
		height: 180px;
	}

	.bg-purple1 {
		margin-right: 5px;
		padding: 5px;
		width: 100px;
		height: 180px;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.goodName {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.price {
		color: #e4393c;
	}

	.foot {
		padding: 10px;
	}

	.next {
		color: #fff;
		background-color: #da2a2e;
	}

	.cancel {
		color: #999;
		background-color: #ccc;
	}
	.mbGoodsType{
		color: #999;
		font-size: 12px;
	}
</style>
